

const SearchBar = () => {
    return (
        <form className="d-flex" role="search" method="POST" id="search-form">
            <div className="input-group body-small me-2">
                <input
                    type="text"
                    autoComplete="off"
                    className="form-control rounded-start-5 search-input"
                    placeholder="Search"
                    aria-label="Search"
                    aria-describedby="button-addon2"
                    id="search-input"
                />

                <button className="btn rounded-end-5" type="submit" id="button-search">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" className="bi bi-search" viewBox="0 0 18 18">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
                    </svg>
                </button>
            </div>

            <div id="search-list" style={{ display: 'none' }}>
                <ul className="dropdown-menu position-static d-grid pt-5 gap-1 p-2 rounded-3 mx-0" id="dropdown-search">
                    {/* Add list items here */}
                </ul>
            </div>
        </form>
    );
};


export default SearchBar